<template>
    <div class="member-layout">
        <div class="grid-content bor-radius-10 mg-bo-10 pos-relative  card-row"
             @click="handler"
        > 
            <div style="position:absolute; z-index:1;left: 4px; top: 2px;">
                <el-checkbox @change="setMember" v-model="state"></el-checkbox>

            </div>
            <div class="card-01 check-box-con "  style="position:relative; z-index:2;">
                <div class="img">
                    <img src="../../../../static/img/member.png">
                </div>
                <span class="member-name l1">{{item.name}}</span>
                <div class="role">
                    <span class="l1">{{item.tel||"暂无"}}</span>
                </div>
            </div>
            <div class="btn-info">
                <span>会员信息</span>
                <span class="line">|</span>
                <span>已购商品</span>
            </div>
            <!-- <span>Checked names: {{ checkedNames }}</span> -->
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            item: '',
            index: '',
            number: ''
        },
        data: function () {

            return {
                classItem: [],
                checkedNames: [],
                state: false,
                a: this.index,
                b: this.number
            }
        },
        watch: {
            number(val) {
                this.b = val;//②监听外部对props属性result的变更，并同步到组件内的data属性myResult中
                if (this.b != this.a) {
                    this.state = false;
                }
            }
        },
        methods: {
            handler: function () {
                this.state = !this.state;
                this.setMember();
            },
            setMember: function () {
                if (this.state) {
                    this.$emit('transferMemeber', this.item)
                } else {
                    this.$emit('deleteMemeber', this.item)
                }
            }
        }

    }
</script>

<style scoped>
    .el-row {
        margin-bottom: 20px;

    &
    :last-child {
        margin-bottom: 0;
    }

    }
    .btn-info {
        cursor: pointer;
    }


</style>
